<template>
  <view class="page">
    <view class="uni-list">
      <view class="uni-list-title">
        <view>尊敬的家属：</view>
        <text class="_2words">
          您好！为了防止新冠病毒疫情的扩散，最大限度的保障孕产妇、患者、家属及医务人员安全，侵入式填写下列调查，如有隐瞒事实，造成疫情扩散情况发生，将承担相应法律责任，谢谢！我院实行“一人一陪护”，且须固定陪护人员，谢谢您的理解和支持！
        </text>
      </view>
    </view>
    <view
      class="uni-list"
      v-for="(quesItem, quesIndex) in questionList"
      :key="quesIndex"
    >
      <view class="uni-list-title">
        {{ quesItem.title }}
      </view>
      <textarea
        class="my-input"
        v-if="quesItem.myType === 'textArea'"
        maxlength="250"
        @input="(e) => fieldChange(e, quesIndex)"
      />
      <radio-group
        v-else
        :data-quesItem="JSON.stringify(quesItem)"
        :data-quesIndex="quesIndex"
        v-model="quesItem.mtValue"
        @change="(e) => fieldChange(e, quesIndex)"
      >
        <view
          class="uni-list-cell uni-list-cell-pd"
          v-for="(item, index) in quesItem.items"
          :key="index"
        >
          <label>
            <view>
              <radio :value="String(index)" color="#4C8FFF" />
            </view>
            <view class="left10">{{ item }}</view>
          </label>
        </view>
      </radio-group>
    </view>
    <view class="see-result" @tap="submit">
      <button>提交</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      img_url: this.$GLOBAL.BASE_IMG,
      questionList: [
        {
          title:
            '1、您是否从事重点行业：进口物品和边防路口安装卸、搬运、运输、存储和销售等相关工作。',
          items: ['A、是', 'B、否'],
          myValue: '',
          toast: '请填写题一'
        },
        {
          title: '2、过去14天有误境外及疫情、高风险区旅居史。',
          items: ['A、是', 'B、否'],
          myValue: '',
          toast: '请填写题二'
        },
        {
          title: '3、目前您有误咳嗽等状况。',
          items: ['A、是', 'B、否'],
          myValue: '',
          toast: '请填写题三'
        },
        {
          title: ' 4、过去14天是否接触确诊或疑似病例。',
          items: ['A、是', 'B、否'],
          toast: '请填写题四',
          myValue: '',
        },
        {
          title: '5、您现在详细居住地址（具体到楼栋）。',
          myValue: '',
          myType: 'textArea',
          toast: '请填写居住地址'
        },
      ],
    };
  },
  methods: {
    fieldChange(evt, i) {
      const value = evt.target.value;
      const item = this.questionList[i];
      item.myValue = value;
    },

    submit() {
      const { questionList } = this;

      const result = questionList.map((o) => o.myValue);
      let [warnFlag, emptyFlag] = [false, false];
      let eItem = null;
      result.map((v, i) => {
        if (i < 4) {
          if (v === '0') {
            warnFlag = true;
          }
        }

        if (!v) {
          emptyFlag = true;
          eItem = questionList[i];
        }
      });

      if (emptyFlag) {
        uni.showToast({
          title: eItem.toast,
          icon: 'none',
        });
      } else {
        if (warnFlag) {
          uni.showModal({
            title: '警告',
            showCancel: false,
            content: '您可能存在疫情感染风险，请前往发热门诊或当地防控部门检查',
            complete: () => {
              console.log(12456);
            }
          });
        } else {
          console.log('数据全部填写');
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
._2words {
  &::before {
    content: '占位';
    opacity: 0;
  }
}
.page {
  padding-top: 20upx;

  .uni-list::before {
    background: #fff;
  }

  .uni-list {
    margin-bottom: 20upx;

    .uni-list-title {
      font-size: 32upx;
      line-height: 45upx;
      padding: 20upx 30upx;
      border-bottom: 2upx solid $uni-border-color;
      font-weight: 500;
      border-top: none;

      view {
        font-size: 32rpx;
        font-weight: bold;
      }
    }

    .uni-list-cell {
      justify-content: end;
      box-sizing: border-box;

      .left10 {
        margin-left: 20upx;
      }
    }

    .uni-list-cell-pd {
      padding: 18upx 30upx;
    }
  }

  .uni-radio-wrapper {
    .uni-radio-input {
      width: 36upx;
      height: 36upx;
      border: 1px solid $uni-border-color;
      margin-right: 20upx;
    }
  }

  .see-result {
    button {
      background: $body-main-active-color;
      color: #fff;
    }
  }
}

.my-input {
  width: calc(100% - 60upx);
  // margin: 0 20upx;
  padding: 18upx 30upx;
}
</style>
